<template>
  <div>
    <div>
      <el-card>
        <el-form inline>
          <el-form-item label="一级分类" prop="region" size="small" class="mt-right">
            <el-select
              placeholder="请选择"
              class="select"
              v-model="category1Id"
              @change="select1"
              :disabled="selectDisable"
            >
              <el-option
                v-for="item in category1List"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类" prop="region" size="small" class="mt-right">
            <el-select
              placeholder="请选择"
              class="select"
              v-model="category2Id"
              @change="select2"
              :disabled="selectDisable"
            >
              <el-option
                v-for="item in category2List"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="三级分类" prop="region" size="small">
            <el-select
              placeholder="请选择"
              class="select"
              v-model="category3Id"
              @change="select3"
              :disabled="selectDisable"
            >
              <el-option
                v-for="item in category3List"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card v-show="!addOrEdit">
        <el-button
          icon="el-icon-plus"
          :disabled="buttonShow"
          type="primary"
          size="small"
          class="mt-bottom"
          @click="addOrEdit = 1"
        >
          添加属性
        </el-button>
        <el-table :data="attrInfoList" style="width: 100%" border class="mt-bottom">
          <el-table-column type="index" label="序号" width="60" align="center"> </el-table-column>
          <el-table-column prop="attrName" label="属性值名称" width="350"> </el-table-column>
          <el-table-column label="属性值列表" width="350">
            <template v-slot="{ row }">
              <el-tag
                size="small"
                class="mt-tag"
                type="success"
                v-for="(item, index) in row.attrValueList"
                :key="index"
                >{{ item.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{ row }">
              <el-button @click="editor(row)" type="warning" size="mini" class="button"
                ><i class="el-icon-edit-outline icon"></i
              ></el-button>
              <el-button type="danger" @click="deleteTrade(row.id)" size="mini" class="button"
                ><i class="el-icon-delete icon"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <AddOrEdit v-if="addOrEdit" :addOrEdit="addOrEdit" :id="category3Id" @toggle="toggle" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AddOrEdit from './addOrEdit/index.vue'
import { reqdeleteAttr } from '@/api/attr'
export default {
  name: 'Attr',
  data() {
    return {
      category1Id: null,
      category2Id: null,
      category3Id: null,
      buttonShow: true,
      addOrEdit: 0
    }
  },
  computed: {
    ...mapGetters(['category1List', 'category2List', 'category3List', 'attrInfoList']),
    selectDisable() {
      return Boolean(this.addOrEdit)
    }
  },
  async beforeMount() {
    await this.$store.dispatch('attr/getCategory1List')
  },
  mounted() {
    this.$store.commit('attr/CLEARATTRINFOLIST')
  },
  methods: {
    async select1(id) {
      this.$store.commit('attr/SETCATEGORY1ID', id)
      this.category2Id = null
      this.category3Id = null
      this.buttonShow = true
      await this.$store.dispatch('attr/getCategory2List')
    },
    async select2(id) {
      console.log(id)
      this.$store.commit('attr/SETCATEGORY2ID', id)
      this.category3Id = null
      this.buttonShow = true
      await this.$store.dispatch('attr/getCategory3List')
    },
    async select3(id) {
      this.$store.commit('attr/SETCATEGORY3ID', id)
      this.buttonShow = false
      await this.$store.dispatch('attr/getAttrInfoList')
    },
    toggle(number) {
      this.addOrEdit = number
      this.$store.dispatch('attr/getAttrInfoList')
    },

    async deleteTrade(id) {
      await reqdeleteAttr(id)
      this.$message.success('删除属性成功!')
      this.$store.dispatch('attr/getAttrInfoList')
    },
    editor(row) {
      this.addOrEdit = 2
      this.$store.dispatch('attr/setAttrRow', row)
    }
  },
  components: {
    AddOrEdit
  }
}
</script>

<style lang="scss" scoped>
.mt-right {
  margin-right: 50px;
}
.mt-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
